<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">


<dom-module id="flake-occurrence">
  <template>
    <style>
      td {
        max-width: 0;
        padding: 2px;
        height: 25px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
      <td width="12%"><a href="http://ci.chromium.org/b/[[occurrence_json.build_id]]">[[occurrence_json.time_happened]]</a></td>
      <td width="8%">[[occurrence_json.flake_type]]</td>
      <td width="30%">[[occurrence_json.step_ui_name]]</td>
      <td width="50%">
          <a href$="[[_linkToTestHistory()]]" target="_blank">[[occurrence_json.test_name]]</a>
          <paper-tooltip position="left" fit-to-visible-bounds="true" offset="0">[[occurrence_json.test_name]]</paper-tooltip>
      </td>
  </template>
  <script>
    (function () {
      "use strict";

      Polymer({
        is: "flake-occurrence",
        properties: {
          // Json serialization of the FlakeOccurrence model.
          occurrence_json: {
            type: Object
          },
        },

        _linkToTestHistory: function() {
          let step_ui_name = this.occurrence_json.step_ui_name;
          let test_type = step_ui_name.split(' ')[0];

          for (let suffix of ['(with patch)', '(retry with patch)']) {
            if (step_ui_name.indexOf(suffix) > -1) {
              test_type += ' ' + suffix;
              break;
            }
          }

          let link = 'https://test-results.appspot.com/dashboards/flakiness_dashboard.html#';
          link += 'testType=' + test_type + '&tests=' + this.occurrence_json.test_name;
          return link;
        }
      });
    })();
  </script>
</dom-module>
